<template>
  <div class="calendar-detail">
    <nav-back />
    <h2 class="title">公历</h2>
    <p class="text">{{nowDay()}}</p>

    <h2 class="title">农历</h2>
    <p class="text">二〇一八年四月初六</p>

    <h2 class="title">干支纪法</h2>
    <p class="text">{{getYearGZ()}}年 ({{getCZ()}}) {{getMonthGZ()}}月 {{getDateGZ()}}日</p>

    <h2 class="title">宜</h2>
    <p class="text">
      <span
        v-for="(o,i) in good"
        :key="i"
        class="item"
      >{{o}}</span>
    </p>

    <h2 class="title">忌</h2>
    <p class="text">
      <span
        v-for="(o,i) in bad"
        :key="i"
        class="item"
      >{{o}}</span>
    </p>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { NavBack } from '@/components'
import { getYearGZ, getMonthGZ, getDateGZ, getCZ } from '@/tools'

const { mapState } = createNamespacedHelpers('Home')
export default {
  name: 'calendar-detail',
  components: { NavBack },
  computed: {
    ...mapState({
      good: state => state.calendar.good,
      bad: state => state.calendar.bad
    })
  },
  methods: {
    nowDay() {
      const t = new Date()
      const y = t.getFullYear()
      const m = t.getMonth() + 1
      const d = t.getDate()
      const w = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][t.getDay()]
      return `${y}年${m}月${d}日 ${w}`
    },
    getYearGZ,
    getMonthGZ,
    getDateGZ,
    getCZ
  }
}
</script>

<style lang="stylus">
.calendar-detail {
  background-color: #fff;

  >.title {
    margin: 10px 16px;
    font-weight: bold;
  }

  >.text {
    margin: 20px 16px;
    line-height: 1.5;

    >.item {
      display: inline-block;
      margin-right: 10px;
    }
  }
}
</style>
